<template>
	<view>
		<view class="ct1">
			<u-search placeholder="搜索" :animation="true" :clearabled="true"></u-search>
		</view>
		<view class="ct2">
			<view class="ct3">
				<view v-for="item in headList" class="ct2-1">{{item.name}}</view>
			</view>
			<view class="ct4">
				<view>
					<view v-for="item in headList">
						<view class="ct4-1">{{item.name}}</view>
						<view class="ct4-3">
							<view class="ct4-2" v-for="(items,index) in item.foods">
								<image :src="items.icon"></image>
								<view>{{items.name}}</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiClassify
	} from '../../api/mock.js';
	export default {
		data() {
			return {
				headList: [],
				bodyList: [],
				list: []
			}
		},
		onLoad() {
			this.apiClassify();

		},
		methods: {
			apiClassify() {
				apiClassify().then((resp) => {
					console.log(100);
					console.log(resp);
					this.headList = resp;

				});
			},

		}
	}
</script>

<style>
	.ct1 {
		width: 90%;
		margin: 0 auto;
		padding-top: 3%;
	}

	.ct2 {
		width: 100%;
		padding-top: 3%;
		/* border: 1px solid #000; */
		display: flex;
	}

	.ct3 {
		width: 20%;
	}

	.ct4 {
		width: 80%;
	}

	.ct2-1 {
		width: 100%;
		text-align: center;
		height: 60px;
		line-height: 60px;
		background-color: #f6f6f6;
		/* border: 1px solid #000; */
	}

	.ct4-1 {
		font-size: 15px;
		margin-left: 5%;
		font-weight: bold;
		margin-top: 3%;
	}

	.ct4-2 {
		padding-left: 8%;
		padding-top: 5%;
	}

	.ct4-2 image {
		width: 80px;
		height: 80px;

	}

	.ct4-3 {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
</style>